<template>
	<div class="formDynamic">
	    <Form :model="formDynamic" :label-width="formDynamic.labelWidth" :ref="formDynamic.ref">
	        <FormItem
	            v-for="(item, key) in formDynamic.items"
	            v-if="item.status"
	            :key="key"
	            :label="item.label"
	            :prop="'items.'+key+ '.value'"
	            :rules="item.rule"
	        >
	            <div v-if = "item.type == 'file'">
	                <!--使用隐藏input，上传图片获取验证机制-->
	                <Input type="text" v-model="item.value" :disabled="true" style='display: none'></Input>
	                <template v-if="item.value !== ''">
	                    <div class='upload-preview'>
	                        <img :src="item.value">
	                        <div class="upload-cover">
	                            <Icon type="ios-eye-outline" @click.native="item.preview ? item.preview(item) : uploadHandleView(item)"></Icon>
	                            <Icon type="ios-trash-outline" @click.native="item.remove ? item.remove(item) : uploadHandleRemove(item)" v-if="!item.disabled" ></Icon>
	                        </div>
	                    </div>
	                </template>
	                <!--看返回API，是否回带key，有带的话，callback可以抽出来了-->
	                <Upload
	                    v-if="item.value == ''"
	                    :name="key" 
	                    :show-upload-list="false"
	                    :format="item.rule[0].fileFormat"
	                    :max-size="item.rule[0].maxSize"
	                    :on-success="item.success ? item.success : uploadHandleSuccess"
	                    :on-error="item.error ? item.error : uploadHandleError"
	                    :on-format-error="uploadHandleFormatError"
	                    :on-exceeded-size="uploadHandleMaxSize"
	                    :before-upload="uploadHandleBeforeUpload"
	                    :action="item.url"
	                >
	                    <div class="upload-bg">
	                        <Icon type="camera" size="40"></Icon>
	                    </div>
	                </Upload>
	            </div>
	            <div v-else>
	                <Input :type="item.type" v-model="item.value" :placeholder="item.placeholder" :disabled="item.disabled"></Input>
	            </div>
	        </FormItem>

	        <FormItem>
                <Button v-if="formDynamic.handleSubmit" type="primary" @click="formDynamic.handleSubmit(getFormObj(formDynamic.ref))">确认提交</Button>
                <Button v-if="formDynamic.handleReset" type="ghost" @click="formDynamic.handleReset(getFormObj(formDynamic.ref))" style="margin-left: 8px">重置</Button>
                <Button v-if="formDynamic.handleBack" type="ghost" @click="formDynamic.handleBack(getFormObj(formDynamic.ref))" style="margin-left: 8px">上一步</Button>
            </FormItem>

	    </Form>
	    <Modal v-model="openImg" :transfer="true" class="form-dynamic-modal">
            <img :src="openImgUrl" v-if="openImg">
            <div slot="footer"></div>
        </Modal>
	</div>
</template>

<script>

import uploadMixin from "@/common/upload-mixin";

export default {

    name: 'formDynamic',

    mixins: [uploadMixin],

    props: {
        data: {
            type: [Object],
            default: {}
        }
    },

    data: function() {
        return {
        	openImg: false,
            openImgUrl:'',
        	formDynamic: this.data
        }
    },

    computed: {

    },

    methods: {
    	getFormObj : function(name) {
    		return this.$refs[name];
    	},
    	test: function() {
    		console.log('test');
    	}
    }
}

</script>

<style lang="less">

.form-dynamic-modal {

	.ivu-modal-wrap {
	    z-index:10000;
	    width:520px; 
	    height:500px;
	    margin:auto; 
	    overflow:hidden;
	}

	.ivu-modal-mask {
		z-index:10000;
	}
}


.formDynamic {

    .upload-bg {
	    width: 200px;
	    height: 100px;
	    line-height: 120px;
	    text-align: center;
	    border: 1px solid #ccc;
	    border-radius: 5px;
	}

	.upload-preview {
	    width: 200px;
	    height: 100px;
	    position:relative;
	    border: 1px solid #ccc;
	    border-radius: 5px;
	}

	.upload-preview img {
	    width:100%;
	    height:100%;
	}

	.upload-cover{
	    display: none;
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    background: rgba(0,0,0,.6);
	    text-align: center;
	    line-height: 100px;
	}

	.upload-preview:hover .upload-cover{
	    display: block;
	}

	.upload-cover i{
	    color: #fff;
	    font-size: 30px;
	    cursor: pointer;
	    margin: 0 2px;
	}
}

</style>
